<template>
  <div class="container">
    <time-mask :gantt-data="ganttData" />
    <div :style="blockStyle">
      <div class="timegrid-now-indicator" :style="setTimeline" v-show="isShowTimeLine">
        <div class="timegrid-now-indicator-line-main" :style="{left: `${timelineLeft}px`}"></div>
      </div>
      <template v-for="(block,index) in ganttData">
        <chart-block :key="index" :block="block"></chart-block>
      </template>
    </div>
  </div>
</template>

<script>
import TimeMask from './time-mask'
import ChartBlock from './chart-block'
import { handleDaySet } from './unit'
import moment from 'moment'
export default {
  name: 'chart-container',
  components: { TimeMask, ChartBlock },
  inject: ['ganttChartInstance'],
  props: {
    ganttData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      timelineLeft: 0,
      timer: null,
      isShowTimeLine: false,
    }
  },
  computed: {
    blockStyle() {
      const { startTime, endTime } = this.ganttChartInstance.timeSectionDayJs
      return {
        width: `${
          this.ganttChartInstance.baseHour * handleDaySet(startTime, endTime).length * 24
        }px`,
      }
    },
    setTimeline () {
      let selectPeople = this.ganttChartInstance.ganttData && this.ganttChartInstance.ganttData.length
      return {
        height: `${this.ganttChartInstance.baseBlock * selectPeople }px`
      }
    },
  },
  methods: {
    setTimelineLeft() {
      let currentDate = moment();
      const isbefore = currentDate.isBefore(moment(this.ganttChartInstance.timeSectionDayJs.startTime), 'day')
      const isafter = currentDate.isAfter(moment(this.ganttChartInstance.timeSectionDayJs.endTime), 'day')
      if(isbefore || isafter){
        // 不显示当前时间线
        this.timelineLeft = 0;
        this.isShowTimeLine = false;
      }else{
        this.isShowTimeLine = true;
        if(this.timer) {
          clearInterval(this.timer);
        }
        this.timer = setInterval(()=> {
          let diff = moment().diff(
            moment(`${this.ganttChartInstance.timeSectionDayJs.startTime.format('YYYY/MM/DD')} 00:00:00`),
            'minute'
          )
          this.timelineLeft = this.ganttChartInstance.baseHour * diff / 60
        }, 1000)
      }
    },
  },
  destroyed() {
    if(this.timer) {
      clearInterval(this.timer);
    }
  },
  watch: {
    'ganttChartInstance.timeSectionDayJs.startTime': {
      handler(newValue, oldValue) {
        this.setTimelineLeft()
      },
      deep: true,
      immediate: true
    },
    'ganttChartInstance.timeSectionDayJs.endTime': {
      handler(newValue, oldValue) {
        this.setTimelineLeft()
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  position: relative;
  overflow: overlay;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  //border-bottom: 1px solid #eee;
  /* 滚动条 */
  &::-webkit-scrollbar-thumb:horizontal {
    /*水平滚动条的样式*/
    width: 4px;
    background-color: #cccccc;
    border-radius: 6px;
    -webkit-border-radius: 6px;
  }
  &::-webkit-scrollbar-track-piece {
   // background-color: red; /*滚动条的背景颜色*/
    border-radius: 0;
    -webkit-border-radius: 0; /*滚动条的圆角宽度*/
  }
  &::-webkit-scrollbar {
    width: 6px; /*滚动条的宽度*/
    height: 4px; /*滚动条的高度*/
  }
  &::-webkit-scrollbar-thumb:vertical {
    /*垂直滚动条的样式*/
    height: 50px;
    background-color: #999;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    outline: 2px solid #fff;
    outline-offset: -2px;
    border: 2px solid #fff;
  }
  &::-webkit-scrollbar-thumb:hover {
    /*滚动条的hover样式*/
    height: 50px;
    background-color: #9f9f9f;
    border-radius: 4px;
    -webkit-border-radius: 4px;
  }
  .contentInfo {
    display: flex;
    align-items: center;
    height: 100%;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 10px;
    // 用于防止被处理
    pointer-events: none;
  }
  .timegrid-now-indicator {
    position: absolute;
    height: 40px;
    .timegrid-now-indicator-line-main{
      position: absolute;
      z-index: 200;
      top: 0;
      bottom: 0;
      border-style: solid;
      border-color: red;
      border-width: 0 1px 0 0;
    }
  }
}
</style>
